<template>
	<view class="about-container">
		
		 

		<!-- 图片区域 -->
		<view class="image-section">
			<image v-if="imageUrl" :src="imageUrl" @error="handleImageError" class="image" mode="aspectFit"></image>
		</view>
		
		
		<!-- 标题区域 -->
		<view class="title-section">
			<view class="title">
				{{ title }}
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<view class="content">
				<view class="text" v-html="formattedContent">
				</view>

				<!-- 上下文链接 -->
				<!-- <view class="context-links">
					<view v-if="prevArticle.id" class="link left" style="width: 50%;">
						<view @click="navigateTo(`/pages/focus/focus?id=${prevArticle.id}`)">
							<view class="iconfont icon-left2 linkfont"></view>{{ prevArticle.title }}
						</view>
					</view>
					<view v-else class="link" style="width: 50%; color: grey;">
						没有更多了
					</view>
					<view v-if="nextArticle.id" class="link" style="width: 50%;">
						<view @click="navigateTo(`/pages/focus/focus?id=${nextArticle.id}`)">
							{{ nextArticle.title }}
							<view class="iconfont icon-right2 linkfont"></view>
						</view>
					</view>
					<view v-else class="link" style="width: 50%; color: grey;">
						没有更多了
					</view>
				</view> -->
				<!-- 返回首页按钮 -->
				<view class="back-home" @click="goToHome">
					返回首页
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFocusById,
		getFocusNextById,
		getFocusPreById
	} from '@/api/system/focus';

	export default {
		data() {
			return {
				title: '每日膳食-如何保持健康的饮食习惯',
				imageUrl: '/static/images/sci.png',
				content: "每日膳食-如何保持健康的饮食习惯",
				cat: 0, // Default category is official
				prevArticle: {},
				nextArticle: {}
			};
		},
		computed: {
			formattedContent() {
				return this.content;
			}
		},
		mounted() {
			let id = this.$route.query.id;
			if (id) {
				this.getFocus(id);
			}
		},
		methods: {
			handleImageError(event) {
				console.error('图片加载失败:', event);
			},
			getFocus(id) {
				getFocusById(id).then(res => {
					this.title = res.data.title;
					this.imageUrl = res.data.cover;
					this.content = res.data.content;
					this.cat=res.data.cat;
					//this.getPrevAndNextFocus(id);
				}).catch(err => {
					console.error('获取膳食数据失败:', err);
				});
			},
			getPrevAndNextFocus(id) {
				getFocusPreById(id).then(res => {
					this.prevArticle = res.data || {};
				}).catch(err => {
					console.error('获取上一条消息失败:', err);
					this.prevArticle = {};
				});
				getFocusNextById(id).then(res => {
					this.nextArticle = res.data || {};
				}).catch(err => {
					console.error('获取下一条消息失败:', err);
					this.nextArticle = {};
				});
			},
			navigateTo(url) {
				console.log("跳转到" + url);
				// 检查URL是否对应到tabbar页面
				if (url.startsWith('/pages/home/home')) {
					this.goToHome();
				} else {
					uni.navigateTo({
						url
					});
				}
			},
			goToHome() {
				console.log("跳转到首页");
				uni.switchTab({
					url: '/pages/index'
				});
			},
			switchCategory(newCat) {
				this.cat = newCat;
				this.currentPage = 1; // Reset to first page
				const url='/pages/focus/list';
				//this.fetchFocusList();
				uni.switchTab({
					//url: url
				});
			},
		}
	};
</script>

<style scoped>
	.uni-tabbar-bottom{display:block;}
	.about-container {
		background-color: #fff;
		padding: 20px;
	}

	.back-home {
		font-size: 16px;
		color: #007aff;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		margin-bottom: 20px;
	}

	.back-home:hover {
		color: #0056b3;
	}

	.title-section {
		margin-bottom: 20px;
	}
	
	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: left;
	}

	.image-section {
		margin-bottom: 20px;
	}

	.image {
		width: 100%;
		max-width: calc(100vw - 40px);
		max-height: 300px;
		border-radius: 25px;
		/* Add this line for rounded corners */
	}

	.content-section {
		margin-bottom: 20px;
	}

	.text {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	.context-links {
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}

	.link {
		text-align: center;
		cursor: pointer;
	}

	.link:hover {
		background-color: #d3d3d3;
	}

	.link[style*="color: grey;"] {
		background-color: #d3d3d3;
		color: #a9a9a9;
	}
.tabs {
    display: flex;
    width: 100%;
    /* 确保容器宽度为100% */
    margin-bottom: 20px;
    border-color: #fff;
}

.tabs button {
    flex: 1;
    /* 每个按钮占据相等的空间 */
    background: none;
    border: none;
    /* 去掉按钮的边框 */
    font-size: 16px;
    padding: 0;
    /* 只设置上下内边距 */
    cursor: pointer;
    transition: color 0.3s ease;
    text-align: center;
    /* 文本水平居中 */
    border-radius: 0;
    /* 移除圆角 */
    box-sizing: border-box;
    /* 确保内边距和边框包含在按钮宽度内 */
}

.tabs button.active {
    font-weight: bold;
    color: #007BFF;
    border-bottom: 2px solid #007BFF; /* 高亮按钮底部边框 */
    background: #fff;
 
	}
</style>
